<!DOCTYPE html>
<html>
<head>
	<title data-react-helmet="true">首页 - 简知</title>
	<meta charset="utf-8">
    <link rel="stylesheet" href="static/common/bootstrap/css/bootstrap.min.css">
     <script src="static/common/jquery-3.3.1.min.js" charset="utf-8"></script>

 <link rel="stylesheet" href="static/common/layui/css/layui.css"  media="all">
	 <style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
	.AppHeader {
    position: fixed;
    z-index: 100;
    min-width: 1032px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(26,26,26,.1);
    background-clip: content-box;
    width: 100%;

}
.AppHeader-inner {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 1050px;
    height: 52px;
    padding: 0 16px;
    margin: 0 auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
}
a {
    color: inherit;
    text-decoration: none;
}
.logo{
	font-family: "宋体" !important;
    font-size: 33px !important;
    color:#1bb1f5f2;
}
.AppHeader-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 30px;
    margin-right: 18px;
    margin-left: 27px;
    color: #999;
}
.AppHeader-navItem.is-active {
    color: #444;
}
.AppHeader-navItem {
    padding: 0 15px;
    font-size: 15px;
    line-height: 30px;
    color: #8590a6;
}
#serch {
    width: 326px;
    height: 41px;
    border-radius: 3px;
    position: relative;
    background: #f7f7f7;
    display: flex;
}
	.serch_content {
    margin-left: 13px;
    height: 33px;
    font-size: 16px;
    font-family: Microsoft Yahei;
    width: 80%;
    border: none;
    margin-top: 3px;
    background: #f7f7f7;
}
	
.btn-primary {
    color: #fff;
    background-color: #1189f1;
    border-color: #1189f1;
}
.btn{
    margin-left: 25px;
}
#person{
    margin-left: 148px;
}
.per{
    margin-right: 10px;
}
.main{
    position: absolute;
    width: 100%;
    z-index: 10;
    height: 1000px;
    margin-top: 53px;
    background: #f7f7f7;
}
.container {
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 713px;
    padding: 0 16px;
    margin: 10px auto;
    background: #fff;
    height: 1000px;
    position: absolute;
    margin-left: 253px;
}
.right1{
    position: fixed;
    width: 268px;
    margin-top: 10px;
    margin-left: 980px;
    height: 90px;
    background: #fff;
    display: flex;
}
.right2{
        position: fixed;
    width: 268px;
    margin-top: 110px;
    margin-left: 980px;
    height: 390px;
    background: #fff;
}
.write {
    margin-top: 17px;
    margin-left: 33px;
}
.topCard{
    width: 100%;
    height: 55px;
    border-bottom: 1px solid #f7f7f7;
}
.Tabs{
    width: 100%;
    height: 55px;
    display: flex;
}
.title2{
    width: 60px;
    height: 100%;
}
.heading{
font-size: 17px;
    margin-top: 16px;
    position: absolute;
    margin-left: 9px;
}
.recommend{
 
    width: 96%;
    position: absolute;
    margin-top: 60px;
    height: 1000px;
}
.follow{

    width: 96%;
    position: absolute;
    margin-top: 60px;
    height: 1000px;
    background: #678;
    display: none;
}
.hotList{

    width: 96%;
    position: absolute;
    margin-top: 60px;
    height: 1000px;
    background: #eaf;
    display: none;
}
#TopstoryItem1{
    width: 100%;
    height: 220px;
    background: #fff;
    position: absolute;
}
#TopstoryItem2{
    width: 100%;
    height: 220px;
    background: #fff;
    position: absolute;
    margin-top: 210px;
}
#TopstoryItem3{
    width: 100%;
    height: 220px;
    background: #fff;
    position: absolute;
    margin-top: 420px;
}
.article_title{
   font-size: 18px;
    font-weight: 600;
    position: absolute;
    margin-top: 12px;
    margin-left: 7px;
    font-family: inherit;

}
.article_img{
   width: 200px;
    height: 110px;
    position: absolute;
    border-radius: 6px;
}
.article_content{
    position: absolute;
    margin-top: 50px;
    width: 665px;
    height: 110px;
    font-size: 17px;
    margin-left: 6px;
}
.article_buttom{
  
    position: absolute;
    margin-top: 173px;
    margin-left: 7px;
    width: 600px;
    height: 40px;
    background: #fff;
}
.love{
    height: 32px;
    margin-top: 4px;
    width: 104px;
    background: #e2f2f9;
    border: none;
    position: absolute;
}
.commit{
    position: absolute;
    height: 32px;
    margin-top: 4px;
    width: 97px;
    border: none;
    margin-left: 140px;
    background: #fff;
}
.love_font{
    margin-left: 8px;
    color: #2365ab;
}
.commit_font{
    margin-left: 14px;
    margin-top: 11px;
    font-size: 16px;
}
.save{
    height: 32px;
    margin-top: 4px;
    width: 73px;
    background: #fff;
    border: none;
    position: absolute;
    margin-left: 280px;
}
.save_font{
    font-size: 17px;
}
.read_more{
    color: #1296db;
    height: 23px;
    border: none;
    background: #fff;
}
.close{
        margin-left: 490px;
    margin-top: 7px;
    border: none;
    background: #fff;
}
.font_content{
    margin-left: 205px;
}
.more_font {
    width: 661px;
    position: absolute;
    word-break: break-word;
    height: 960px;
}
.user_uname{
    margin-left: 100px;
    margin-top: -30px;
    position: absolute;
}
 </style>






















</head>
<body>
	<header class="Sticky AppHeader">
		<div class="AppHeader-inner" >
			<a href="" class="logo">简知</a>
			<nav class="AppHeader-nav">
				<a class="AppHeader-navItem is-active" href="">首页</a>
				<a class="AppHeader-navItem" href="">发现</a>
				<a class="AppHeader-navItem" href="">话题</a>
			</nav>
			<div id="serch">
				<input type="text" name="serch_content" placeholder="2018 CPA 段子创作现场" class="serch_content">
				<div id="photo_serch">
					<a href="">
						 <object data="static/system/svg/serch.svg" type="image/svg+xml" style="position: relative;top: 2px; width: 21px;margin-top: 9px;margin-left: 14px;"></object>
					</a>
				</div>
			</div>
             <button type="button" class="btn btn-default btn-primary">提问</button>
             <div id="person">
                 <object data="static/system/svg/msg.svg" type="image/svg+xml" class="per" style="position: relative;top: -5px; width: 26px;margin-top: 9px;margin-left: 14px;"></object>
                  <object data="static/system/svg/letter.svg" type="image/svg+xml" class="per" style="position: relative;top: -5px; width: 26px;margin-top: 9px;margin-left: 14px;"></object>
                  <button onclick="logout();" style="display: none; margin-left: 170px;margin-top: -33px;position: absolute;" type="button" id="logout" class="btn btn-primary active btn-sm">退出</button>
                 
             </div>
             
        </div>
	</header>
    <main class="main">
        <div class="container">
           <div class="topCard">
               <ul class="Tabs">
                   <li class="title2"><a onclick="choice1()" class="heading">推荐</a></li>
                   <li class="title2"><a onclick="choice2()" class="heading">关注</a></li>
                   <li class="title2"><a onclick="choice3()" class="heading">热榜</a></li>
               </ul>
           </div>
            <div class="recommend" id="recommend">

            </div>
           <div class="follow" id="follow">
               
           </div>
           <div class="hotList" id="hotList">
               
           </div>
        </div>
        <div class="right1">
            <a href="" class="write">
               <object data="static/system/svg/answer.svg" type="image/svg+xml" class="per" style="position: relative;top: -3px; width: 24px;margin-top: 9px;margin-left: 14px;"></object>
               <div>写回答</div>
            </a>
            <a onclick="edit_article()" class="write">
               <object data="static/system/svg/article.svg" type="image/svg+xml" class="per" style="position: relative;top: -3px; width: 24px;margin-top: 9px;margin-left: 14px;"></object>
               <div>写文章</div>
            </a>
            <a href="" class="write">
               <object data="static/system/svg/idea.svg" type="image/svg+xml" class="per" style="position: relative;top: -3px; width: 24px;margin-top: 9px;margin-left: 14px;"></object>
               <div>写想法</div>
            </a>
        </div>
         <div class="right2">
            
        </div>
    </main>
    <script type="text/javascript">
        function choice1() {
            
            if ($("#recommend").css('display')=="none") {
                $("#recommend").css('display','block');
                 $("#follow").css('display','none');
                  $("#hotList").css('display','none');
            }
        }
        function choice2() {
            if ($("#follow").css('display')=="none") {
                
                 $("#follow").css('display','block');
                 $("#recommend").css('display','none');
                  $("#hotList").css('display','none');
            }
        }
     function choice3() {
           if ($("#hotList").css('display')=="none") {
               $("#hotList").css('display','block');
                $("#recommend").css('display','none');
                 $("#follow").css('display','none');
 
            }
        }
        function read_more(i) {
           // alert(article_content);
             var i= parseInt(i);
            $(`#article_content${i}`).html(`<div class="more_font" id="more_font${i}">

                <h2>  <img style="width:30px;height:30px" src="static/system/img/${article_content[i].userInfo.uHeadimg}"> ${article_content[i].userInfo.uName}</h2>

                共有${article_content[i].totalLove}赞同了该回答</br>
                ${article_content[i].content}<br>
                ${article_content[i].uploadDate}
                </div>`);
            
            $(`#article_buttom${i}`).css("bottom",`0px`);
            $(`#article_buttom${i}`).css("position","fixed");

             $(`#article_buttom${i}`).append(`
                <a class="close" id="close${i}" 
                onclick="closeContent(${i})">收起
              <object data="static/system/svg/more.svg" type="image/svg+xml"></object></a>
              `);

            $(`#TopstoryItem${i+1}`).css("margin-top","1010px");
            $(`#TopstoryItem${i+2}`).css("margin-top","1220px");
        }
        function closeContent(i) {
           var i= parseInt(i);
           $(`#more_font${i}`).remove();
            $(`#article_content${i}`).html(` 

                           <img class="article_img" id="article_img" src="static/upload/${article_content[i].cover}">
                          <div class="font_content" id="font_content3">
                             ${article_content[i].summary}
                              <button class="read_more" onclick="read_more(${i})">阅读全文
                              <object data="static/system/svg/more.svg" type="image/svg+xml"></object>
                        </button>
                        </div>
                         `);

             $(`#article_buttom${i}`).css("margin-top","173px");
               $(`#article_buttom${i}`).css("position","absolute");
               $(`#article_buttom${i}`).css("bottom","");
               for (var j= i; j<=3; j++) {
                    $(`#TopstoryItem${j}`).css("margin-top",`${210*j}px`);
               }
                 $(`#close${i}`).remove();
        }
        function gologin() {
            window.location.href="sign-inOrOut.html";
        }
        var article_content;
        window.onload=function () {
              fetch("/user_module/getUserMsg",{
                method: "GET",
                headers: {
                "Content-Type": "application/JSON"
            }
             }).then(res => res.json()).catch(error => console.error(error))
                    .then(function(response){
              if(response.status=='401'){
                  $("#person").append(`
                         <button onclick="gologin();" style="margin-left: -2px;margin-top: -26px;" type="button" class="btn btn-primary active btn-sm">登录</button>
                    `);
              }else if(response.status=='200'){
                    $("#person").append(`
                        <a onmouseover="lookmsg()"  class="user_uname">`+
                          response.data.uName+
                        `</a>
                      



                        `);

                fetch("/article_module/getLoveByuId/"+response.data.uId,{
                method: "post",
                headers: {
                "Content-Type": "application/JSON"
            }
             }).then(res => res.json()).catch(error => console.error(error))
                    .then(function(response){
                        if(response.status==200){
                            var data=response.data;
                            for (var i = 0; i <data.length; i++) {
                                if(data[i].isLove=="1"){
                                $(`#${data[i].articleInfo.articleId}`).html(`
                                    已赞同 ${data[i].articleInfo.totalLove}
                                    `);
                               
                              }
                            }
                            
                      }
              });




                }
              });
          



           fetch("/article_module/getAllArticle", {
            method: "GET",
            headers: {
                "Content-Type": "application/JSON"
            }
           
        }).then(res => res.json()).catch(error => console.error(error))
            .then(function(response){
              if(response.status=='401'){
                  
              }else if(response.status=='200'){
                  var data=response.data;
                  article_content=data;
                  
                  for (var i = 0; i < data.length;i++) {

                  	$("#recommend").append(`
                    <div class="TopstoryItem" id="TopstoryItem${i}">
                    <div class="article_title">
                        ${data[i].articleTitle}
                    </div>
                    <div class="article_content" id="article_content${i}">
                          <img src="static/upload/${data[i].cover}" class="article_img" id="article_img">
                          <div class="font_content" id="font_content${i}">
                               ${data[i].summary}
                               <button class="read_more" onclick="read_more(${i})">阅读全文<object data="static/system/svg/more.svg" type="image/svg+xml"></object>
                        </button>
                          </div>
                       
                    </div>
                    <div class="article_buttom" id="article_buttom${i}">
                        <button class="love" onclick="golove(${data[i].articleId})"><object data="static/system/svg/love.svg" type="image/svg+xml" class="per" style="position: absolute;top: -9px; width: 16px;
                        margin-top: 15px;margin-left: -11px;"></object>

                            <font class="love_font" id="${data[i].articleId}">赞同 ${data[i].totalLove}</font>

                        </button>
                        <button class="commit" onclick="selectComment(${data[i].articleId})"><object data="static/system/svg/commit.svg" type="image/svg+xml" class="per" style="position: absolute;top: -9px; width: 16px;
                        margin-top: 17px;margin-left: -4px;"></object>
                        <font  class="commit_font">${data[i].totalComment}条评论</font>
                    </button>
                    <button class="save">
                        <object data="static/system/svg/save.svg" type="image/svg+xml" class="per" style="position: absolute;top: -9px; width: 16px;
                        margin-top: 17px;margin-left: -18px;"></object>
                         <font class="save_font">收藏</font>
                    </button>
                    </div>
                </div>
                        `);
                $(`#TopstoryItem${i}`).css("margin-top",`${i*210}px`);
                  }
                 }
            });
        }
        function selectComment(articleId) {
            window.open("article_comment.html?article_id="+articleId);
        }
        function golove(articleId) {
             fetch("/user_module/getUserMsg",{
                method: "GET",
                headers: {
                "Content-Type": "application/JSON"
            }
             }).then(res => res.json()).catch(error => console.error(error))
                    .then(function(response){
              if(response.status=='401'){
                 window.location.href="sign-inOrOut.html";
              }else if(response.status=='200'){
                   fetch("/article_module/golove/"+response.data.uId+"/"+articleId,{
                method: "POST",
                headers: {
                "Content-Type": "application/JSON"
            }
             }).then(res => res.json()).catch(error => console.error(error))
                    .then(function(response){
                        if(response.status==200){//没数据点赞成功
                        $(`#${response.data.articleId}`).html(`已赞同 ${response.data.totalLove}`);
                    }
                    if (response.status==201) {//有数据点赞成功
                        $(`#${response.data.articleId}`).html(`已赞同 ${response.data.totalLove}`);
                    }
                    if (response.status==202) {//有数据取消点赞成功
                        $(`#${response.data.articleId}`).html(`赞同 ${response.data.totalLove}`);
                    }
                    });

                }
              });
        }
        function lookmsg() {
            $("#logout").css("display","block");
        }
        function logout() {
            fetch("/user_module/logout",{
                method: "GET",
                headers: {
                "Content-Type": "application/JSON"
            }
             }).then(res => res.json()).catch(error => console.error(error))
                    .then(function(response){
                        if (response.status) {
                            window.location.href=window.location.href;
                        }

                    });

                          
              }
              function edit_article() {
                  fetch("/user_module/getUserMsg",{
                method: "GET",
                headers: {
                "Content-Type": "application/JSON"
            }
             }).then(res => res.json()).catch(error => console.error(error))
                    .then(function(response){
              if(response.status=='401'){
                 window.location.href="sign-inOrOut.html";
              }else if(response.status=='200'){
                window.location.href="article_edit.html";
              }
          });
              }
    </script>
</body>
</html>

